<template>
	<view>
		<van-nav-bar title="发起申请" right-text="申请记录" left-arrow fixed placeholder @click-left="onClickLeft"
			@click-right="onClickRight" />
		<view style="margin-top: 20rpx"></view>
		<van-form @submit="confirmRemoke">

			<view style="margin-top: 20rpx"></view>
			<van-cell-group inset>
				<uni-datetime-picker :hide-second="true" v-model="formData.startTime" @change="changeStratTime">
					<van-field v-model="formData.startTime" is-link readonly autosize name="datePicker" label="开始时间"
						placeholder="请选择开始时间" required :rules="[{ required: true, message: '请选择开始时间' }]"
						error-message-align="left" clearable />
				</uni-datetime-picker>

				<uni-datetime-picker :hide-second="true" :start="startDate" :end="endDate" v-model="formData.endTime"
					@change="changeEndTime">
					<van-field v-model="formData.endTime" is-link readonly autosize name="datePicker" label="结束时间"
						placeholder="请选择结束时间" required :rules="[{ required: true, message: '请选择结束时间' }]"
						error-message-align="left" clearable>
					</van-field>
				</uni-datetime-picker>
				<van-field v-model="formData.totalDuration" autosize label="加班时长" placeholder="加班时长" required
					:rules="[{ required: true, message: '加班时长' }]" error-message-align="left" clearable />
			</van-cell-group>
			<view style="margin-top: 20rpx;"></view>
			<van-cell-group inset>
				<van-field v-model="formData.reason" autosize label="加班事由" placeholder="请填写加班事由" required
					type="textarea" rows="3" :rules="[{ required: true, message: '请填写加班事由' }]"
					error-message-align="left" clearable />
			</van-cell-group>
			<view style="margin-top: 20rpx;"></view>

			<view class="card shcard">
				<view style="padding:30rpx 24rpx ;font-weight: 700;font-size: 30rpx;">审批流程</view>
				<view class="stepbox">
					<view class="stepItem">
						<view>
							<image :src="userInfo.avatar?userInfo.avatar:'../../static//images/noavatar.png'"
								mode="scaleToFill" class="avatar" />
						</view>
						<view class="person">
							<view>发起申请</view>
							<view class="nickname">我</view>
						</view>
					</view>
					<view class="stepItem" v-for="(item,index) in stepPerson" :key="index">
						<view>
							<image :src="item.avatar?item.avatar:'../../static//images/noavatar.png'" mode="scaleToFill"
								class="avatar" />
						</view>
						<view class="person">
							<view>{{item.nodeTitle}}</view>
							<view class="nickname">{{item.realityUserName}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="boxx">
				<van-button type="primary" class="w-full" native-type="submit">提交</van-button>
			</view>
		</van-form>
		<view style="height: 100rpx;"></view>
	</view>
</template>
<script setup>
	import {
		openStartApproveOverwork,
		dailyOverworkApproveAdd
	} from "@/api"
	const formData = ref({})
	import {
		USER_INFO_KEY
	} from "@/enums/cacheEnum"
	const userInfo = ref(cache.get(USER_INFO_KEY))
	console.log(userInfo)
	const active = ref(0)
	const stepPerson = ref([])
	onLoad(async () => {
		const res = await openStartApproveOverwork()
		stepPerson.value = res.data
		// console.asser
	})
    const onClickRight=()=>{ 
      uni.navigateTo({
        url:'/pages/vacation/record?type=1'
      })
    }
	const confirmRemoke = async () => {
		console.log(122)
		try {
			if (formData.value.startTime) {
				formData.value.startTime = formData.value.startTime + ':00'
			}
			if (formData.value.endTime) {
				formData.value.endTime = formData.value.endTime + ':00'
			}
			const res = await dailyOverworkApproveAdd(formData.value)
			console.log(res)
			feedback.toast("提交成功");
			uni.redirectTo({
				url:'/pages/vacation/record?type=1'
			})
		} catch (error) {} finally {

		}
	}
	// 计算函数
	function diffTime(startDate, endDate) {
		console.log(startDate, endDate);
		startDate = new Date(startDate);
		endDate = new Date(endDate);
		//时间差的秒数
		let diff = Math.floor((endDate.getTime() - startDate.getTime()) / 1000);
		let hours = diff / (60 * 60)
		return hours;
	}

	const changeStratTime = (e) => {
		console.log(e)
		if (formData.value.endDate) {
			formData.value.totalDuration = diffTime(e, formData.value.endDate).toFixed(2)
		}


	}
	const changeEndTime = (e) => {
		console.log(e)
		if (formData.value.startTime) {
			formData.value.totalDuration = diffTime(formData.value.startTime, e).toFixed(2)
		}
	}
	const onClickLeft=()=>{
	   uni.navigateBack({
	    delta:1
	   })
	}
</script>
<style>
	.shcard /deep/ .van-steps {
		background: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.stepbox {
		padding: 30rpx;
		margin: 0 auto;
		box-sizing: border-box;

		.stepItem {
			display: flex;
			align-items: center;
			padding-bottom: 100rpx;
			position: relative;

			&::after {
				content: '';
				width: 5rpx;
				height: 80rpx;
				background: #e1e1e1;
				position: absolute;
				bottom: 10rpx;
				left: 42rpx;
			}

			&:nth-last-child(1) {
				padding-bottom: 0;

				&::after {
					display: none;
				}
			}

			.avatar {
				width: 90rpx;
				height: 90rpx;
				display: block;

				image {
					width: 90rpx;
					height: 90rpx;
					display: block;
					border-radius: 10rpx;
				}

			}

			.person {
				padding-left: 40rpx;
				font-size: 28rpx;
				font-weight: 700;

				.nickname {
					color: #8d8d8d;
					font-weight: 400;
					padding-top: 10rpx;
				}
			}
		}
	}

	.card {
		background: #fff;
		width: 690rpx;
		margin: 0 auto;
		border-radius: 20rpx;
	}

	.boxx {
		margin: 30rpx auto;
		width: 690rpx;
	}

	.btn {
		width: 93%;
		height: 88rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 88rpx;
		background: #1158BF;
		color: #fff;
		margin: 0 auto;
		margin-top: 100rpx;
	}
</style>